﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="HomePageMenuHistory.aspx.cs" Inherits="HomePageMenuHistory" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <%--選單--%>
    <%--<div class="homepage-menu-container">--%>
        <%--<div id="homepage-menu-category"class="homepage-menu">
            <div id="category-go" class="category-go">
                <span>這裡是種類</span>
            </div>
        </div>
        <div id="homepage-menu-brand" class="homepage-menu">這裡是品牌</div>
        <div id="homepage-menu-filter" class="homepage-menu">這裡是篩選</div>--%>
    </div>
    </form>

    <script>

        // Category Menu -----------------------------------------

        // 使用者點選種類後 呼叫categoryGo
        $('#category-go').click(categoryGo);

        // 使用者點選回到 div轉換成種類首頁
        function categoryBack() {
            var htmlString = '<div id="category-go" class="category-go">這裡是種類</div>';
            $('#homepage-menu-category').html(htmlString);
            // 初始化此div的jQuery
            $('#category-go').click(categoryGo);
        }

        // 使用者點選種類後 div轉換成三種類
        function categoryGo() {
            var htmlString = '<div id="category-back" class="category-icon category-back">' +
            '<img src="images/white-arrow-left.gif" /></div><div class="category-icon category-phone">' +
            '<a class="iconphone"></a><h6 style="padding-top:7px;color:#000000;">手&nbsp;機</h6></div><div class="category-icon category-pad">' +
            '<a class="icontablet"></a><h6 style="padding-top:7px;color:#000000;">平&nbsp;板</h6></div><div class="category-icon category-wear">' +
            '<a class="iconwear"></a><h6 style="padding-top:2px;color:#000000;">穿&nbsp;戴<br />裝&nbsp;置</h6></div>';
            $('#homepage-menu-category').html(htmlString);
            // 初始化此div的jQuery
            $('#category-back').click(categoryBack);
            $('.category-icon')
                .mouseenter(function () {
                    $(this).css('opacity', '0.6');
                })
                .mouseleave(function () {
                    $(this).css('opacity', '0.2');
                })
                .mousedown(function () {
                    $(this).css('opacity', '1');
                })
                .mouseup(function () {
                    $(this).css('opacity', '0.6');
                });
        }
    </script>
</body>
</html>
